<template>
<div class="bg-grey-10">
    <q-scroll-area class="full-width" v-if="musicList.length>0" ref="scrollContainer" :horizontal="false" :style="scrollStyle" :thumb-style="{
      right: '4px',
      borderRadius: '5px',
      backgroundColor: '#009688',
      width: '5px',
      opacity: 0.75,
    }" :bar-style="{
      right: '2px',
      borderRadius: '9px',
      backgroundColor: '#03a9f4',
      width: '9px',
      opacity: 0.2,
    }">
        <q-list separator ref="qList" :style="{width:scrollStyle.width}" dark>

            <q-item v-for="item,index in musicList" :key="index" clickable :active="selectedItem==item.music_id" active-class="bg-teal-8 text-white" @click="handleItemClick(item,index,item.music_id)">
                <q-card class="bg-transparent q-pa-none full-width" flat>

                    <div class="row items-center justify-between  no-wrap ">
                        <div class="column ellipsis ">
                            <div class="row  items-end text-subtitle1 name " :class="{scroll: nameScroll && selectedItem==item.music_id}">
                                {{ item.name }}

                            </div>
                            <div class="text-caption row items-center" style="opacity:0.8">Id:{{ item.music_id }}</div>
                            <div class="text-caption row items-center q-py-sm">
                                <span class="q-mr-sm row items-center" >
                                    <q-icon v-if="item.duration" class="q-mr-sm" name="mdi-clock-time-nine-outline"></q-icon>
                                    <q-badge v-if="item.duration" outline dense color="blue-6">{{item.format_duration}}</q-badge>
                                    <div v-if="item.type[0]!=0" class="q-ml-sm">
                                        <span v-for="i in item.type" :key="i.mt_id">
                                            <q-badge class="q-mr-sm" outline dense color="light-green-6">{{i.name}}</q-badge>
                                        </span>
                                    </div>

                                </span>
                            </div>
                        </div>

                        <div class="row items-center no-wrap q-pl-sm">
                          <q-badge v-if="item.isLoad==1" align="middle" class="q-ma-sm q-pa-xs text-bold" style="

                          backdrop-filter: blur(5px);
                          filter:drop-shadow(1px 1px 3px rgb(49, 49, 49))
                        "  outline color="green-4">
                          已加载
                          </q-badge>
                            <q-spinner-audio class="q-ml-sm full-height" color="white" v-show="selectedItem==item.music_id && isPlay" />
                            <q-rating v-if="$platform.inDesktop()" @input="handleRating(item)" class="no-wrap" v-model="item.rate" max="5" @click.stop color="white" icon="star_border" icon-selected="star" icon-half="star_half" />
                            <q-btn dense @click.stop="handleCollect(item,index)" flat :icon="item.isCollect?'mdi-music-note-off-outline':'mdi-music-note-plus'" :color="item.isCollect?'red-6':'white'"></q-btn>
                            <q-btn dense @click.stop="handleLike(item,index)" flat :icon="item.ml_id?'mdi-heart':'mdi-heart-outline'" :color="item.ml_id?'red-6':'white'"></q-btn>
                            <q-separator color="grey" vertical></q-separator>

                            <q-icon @click.stop class="q-ml-sm" size="30px" name="mdi-dots-horizontal">
                                <q-menu dark v-if="tab=='library'">
                                    <q-list dense style="min-width: 100px" class="shadow-7">
                                        <q-item @click="handleRenameDialog(item,index)" clickable v-close-popup>

                                            <q-item-section>
                                                <div class="row no-wrap items-center">
                                                    <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                    <span>重命名</span>
                                                </div>

                                            </q-item-section>
                                        </q-item>
                                        <q-item @click="handleType(item,index)" clickable v-close-popup>

                                            <q-item-section>
                                                <div class="row no-wrap items-center">
                                                    <q-icon class="q-mr-sm" name="mdi-folder-edit-outline" />
                                                    <span>设置分类</span>
                                                </div>
                                            </q-item-section>
                                        </q-item>
                                        <q-separator />
                                    </q-list>

                                </q-menu>
                                <q-menu dark v-if="tab=='collection'">
                                    <q-list dense style="min-width: 100px" class="shadow-7">
                                        <q-item @click="handleLoadToProject(item,index)" clickable v-close-popup>

                                            <q-item-section>
                                                <div class="row no-wrap items-center">
                                                    <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                    <span v-if="item.isLoad==0">加载至项目</span>
                                                    <span v-if="item.isLoad==1">移除音乐</span>
                                                </div>

                                            </q-item-section>
                                        </q-item>
                                        <q-item @click="handleType(item,index)" clickable v-close-popup>

                                            <q-item-section>
                                                <div class="row no-wrap items-center">
                                                    <q-icon class="q-mr-sm" name="mdi-folder-edit-outline" />
                                                    <span>设置分类</span>
                                                </div>
                                            </q-item-section>
                                        </q-item>
                                        <q-separator />
                                    </q-list>

                                </q-menu>
                            </q-icon>

                        </div>

                    </div>

                </q-card>
                <q-menu touch-position context-menu dark >
                  <q-list dense style="min-width: 100px" class="shadow-7">
                      <q-item @click="handleRenameDialog(item,index)" clickable v-close-popup>

                          <q-item-section>
                              <div class="row no-wrap items-center">
                                  <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                  <span>重命名</span>
                              </div>

                          </q-item-section>
                      </q-item>
                      <q-item @click="handleType(item,index)" clickable v-close-popup>

                          <q-item-section>
                              <div class="row no-wrap items-center">
                                  <q-icon class="q-mr-sm" name="mdi-folder-edit-outline" />
                                  <span>设置分类</span>
                              </div>
                          </q-item-section>
                      </q-item>
                      <q-separator />
                  </q-list>

              </q-menu>
            </q-item>


        </q-list>
        <div class="row items-center justify-center q-my-sm">

            <q-pagination v-if="total>1" v-model="pageNum" :max="total" size="25px" input input-class="text-primary" @input="handlePage" />
        </div>

    </q-scroll-area>
    <div v-else class="full-width column flex-center" :style="scrollStyle">
        <q-icon size="30px" name="mdi-note-search-outline"></q-icon>
        <span>-暂无音乐-</span>
    </div>

    <q-dialog persistent fixed v-model="isTypeDialog" position="standard" transition-show="slide-up" transition-hide="slide-down" class="bg-dark">
        <q-card class="bg-dark" style="min-width:200px">
            <q-card-section class="q-pa-none">
                <q-toolbar dark class="text-white">
                    <div>设置分类</div>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleTypeClose">
                    </q-btn>
                </q-toolbar>

            </q-card-section>
            <q-separator color="grey-6"></q-separator>
            <q-card-section>
                <span class="text-caption text-grey-6 q-mb-md">当前歌曲：{{ curItem.name }}</span>
                <q-select dark filled multiple v-model="curType" @input="handleTypeInput" :options="typeOptions" label="类别" option-value="mt_id" option-label="name" />
            </q-card-section>

            <q-card-actions align="right">

                <q-btn outline color="white" @click="handleUpdateType">确认</q-btn>
            </q-card-actions>

        </q-card>

    </q-dialog>
    <q-dialog persistent fixed v-model="isRenameDialog" position="standard" transition-show="slide-up" transition-hide="slide-down" class="bg-dark">
        <q-card class="bg-dark" style="min-width:200px">
            <q-card-section class="q-pa-none">
                <q-toolbar dark class="text-white">
                    <div>重命名</div>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleRenameClose">
                    </q-btn>
                </q-toolbar>

            </q-card-section>
            <q-separator color="grey-6"></q-separator>
            <q-card-section>
                <q-input dark filled v-model="curName.name" @input="handleTypeInput" label="名称" />
            </q-card-section>

            <q-card-actions align="right">

                <q-btn outline color="white" @click="handleRename">确认</q-btn>
            </q-card-actions>

        </q-card>

    </q-dialog>
    <q-dialog persistent fixed v-model="isLikeDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
      <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
          <q-header class="bg-grey-10 shadow-7">

              <q-toolbar>
                  <q-toolbar-title>设置喜欢</q-toolbar-title>
                  <q-space />

                  <q-btn dense flat icon="close" @click="handleLikeClose">
                  </q-btn>
              </q-toolbar>

          </q-header>

          <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

              <span>
                  <q-breadcrumbs class="q-px-sm text-primary">
                      <q-breadcrumbs-el v-for="item in curLikeFolderPath" :key="item.mlf_id" :label="item.name" @click="handleLikeSelect(item.mlf_id)" class="cursor-pointer" />

                  </q-breadcrumbs>
              </span>

              <q-toolbar class="justify-between">

                  <q-space></q-space>

                  <q-btn outline class="q-px-md" @click="submitLike"> 确认</q-btn>
              </q-toolbar>
          </q-footer>
          <q-page-container>

              <q-page v-if="curMusic" class="bg-dark  column hide-scrollbar" style="padding-top:45px">
                  <likefolder-tree ref="likeFolderTree" @curFolder="handleCurFolder"></likefolder-tree>

                  <q-page-sticky position="top" expand>
                      <div class="text-white q-pt-sm full-width bg-dark">
                          <tips-title :title="curMusic.name"></tips-title>
                      </div>
                  </q-page-sticky>

              </q-page>
          </q-page-container>

      </q-layout>

  </q-dialog>
</div>
</template>

<script>
import {
    loadMusicList,
    rateMusic,
    updateMusicDuration,
    updateMusicName,
    updateMusicType,
    addToCollect,
    addToLike,
    removeLike,
    loadMusicListByType,
    removeCollect,
    loadToProject,
    removeFromProject

} from "assets/api/studio/music"
import moment from "moment";
import {
    getSeconds
} from "assets/utils/stodate";
export default {
    name: 'MusicList',
    components:{
      LikefolderTree: () => import('components/studio/music/LikefolderTree.vue'),
    },
    props: {
        musicList: {
            type: Array
        },
        scrollStyle: {
            type: Object,

        },
        typeOptions: {
            type: Array
        },
        isPlay: {
            default: false
        },
        tab: {
            type: String,
            default:'library'
        }

    },
    data() {
        return {
            childMusicList: [],
            pid: '',
            nameScroll: true,
            isTypeDialog: false,
            isRenameDialog: false,
            curItem: {
                name: '',
                index: ''
            },
            curType: [],
            curName: {
                name: '',
                music_id: '',
                index: null
            },
            curMusicType: '',
            curMusicTypeName: '',
            isLoadType: false,
            isFirstLoad: true,
            selectedItem: '',
            pageNum: 1,
            total: 0,
            isLikeDialog:false,
            curMusic:null,
            curLikeFolder: {
                mlf_id: 0,
                name: '全部'
            },
            curLikeFolderPath: [{
                mlf_id: 0,
                name: '全部',
            }],
        }
    },
    mounted() {
        this.pid = this.$route.params.pid
    },
    watch: {
        musicList: function (val) {
            this.childMusicList = val
        }
    },
    methods: {
        handleLoadToProject(item, index) {
            console.log(item);
            let projectInfo = this.$storage.getItem(this.pid);
            console.log(projectInfo);

            if (item.isLoad == 0) {

                loadToProject({
                    name: item.name,
                    projectPath: projectInfo.project_id + projectInfo.name,
                    mc_id: item.mc_id,
                    path: item.path
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$message.success('加载至项目成功！')

                        this.childMusicList[index].isLoad = 1

                    } else {
                        this.$message.error('加载至项目失败！')
                    }
                })

            } else {
                this.$q
                    .dialog({
                        title: "提示",
                        message: "确认从项目移除该音乐吗？",
                        cancel: true,
                        persistent: true,
                        dark: true
                    })
                    .onOk(() => {
                        removeFromProject({
                            name: item.name,
                            projectPath: projectInfo.project_id + projectInfo.name,
                            mc_id: item.mc_id,
                            path: item.path
                        }).then(res => {
                            console.log(res);
                            if (res.data.code == 1) {
                                this.$message.success('移除音乐成功！')

                                this.childMusicList[index].isLoad = 0

                            } else {
                                this.$message.error('移除音乐失败！')
                            }
                        })
                    })

                    .onCancel(() => {
                        // console.log('>>>> Cancel')
                    })
                    .onDismiss(() => {
                        // console.log('I am triggered on both OK and Cancel')
                    });
            }

        },
        handleLike(item, index) {
          if(item.ml_id){
            removeLike({
                ml_id: item.ml_id
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success('取消喜欢成功！')
                    item.ml_id = null
                } else {
                    this.$message.error('取消喜欢失败！')
                }
            })

          }else{
            console.log(item);
            this.curMusic = item;
            this.isLikeDialog=true
          }
        },
        submitLike() {
            addToLike({
                music_id: this.curMusic.music_id,
                mlf_id: this.curLikeFolder.mlf_id
            }).then(res => {
                if (res.data.code == 1) {
                    let data = res.data.data
                    console.log(data);
                    this.curMusic.ml_id = data.insertId
                    this.handleLikeClose()
                    this.$message.success('喜欢成功！')
                } else {
                    this.$message.error('喜欢失败！')
                }
            })
        },
        handleCurFolder(curLikeFolder, curLikeFolderPath) {
            this.curLikeFolder = curLikeFolder;
            this.curLikeFolderPath = curLikeFolderPath;
        },
        handleLikeClose() {
            this.curMusic = null;
            this.isLikeDialog = false;

            this.curLikeFolder = {
                mlf_id: 0,
                name: '全部'
            }
            this.curLikeFolderPath = [{
                mlf_id: 0,
                name: '全部',
            }]
        },



        handleCollect(item, index) {
            console.log(item, index);
            if (item.isCollect) {
                console.log('remove');
                removeCollect({
                    mc_id: item.mc_id
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$message.success('取消收藏成功！')


                        if(this.tab=='collection'){
                          this.childMusicList.splice(index,1)
                        }else{
                          this.childMusicList[index].isCollect = false
                        }

                    } else {
                        this.$message.error('取消收藏失败！')
                    }
                })
            } else {
                addToCollect({
                    pid: this.pid,
                    mcf_id: 0,
                    music_id: item.music_id
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 1) {
                        this.$message.success('收藏成功！')

                        this.childMusicList[index].isCollect = true

                    } else {
                        this.$message.error('收藏失败！')
                    }
                })
            }

        },
        handleRemoveCollect(item, index) {
            console.log('remove');
        },
        handleUpdateType() {
            console.log(this.curItem, this.curType);
            updateMusicType({
                type: this.curType,
                music_id: this.curItem.music_id
            }).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    this.$message.success('设置分类成功！')
                    this.childMusicList[this.curItem.index].type = this.curType
                    this.curType = []
                    this.isTypeDialog = false

                } else {
                    this.$message.error('设置分类失败！')
                }
            })

        },
        handleTypeInput() {

        },
        handleRenameDialog(item, index) {
            this.curName.name = item.name;
            this.curName.music_id = item.music_id;
            this.curName.index = index
            this.isRenameDialog = true;

        },
        handleRenameClose() {
            this.curName = {
                name: '',
                music_id: '',
                index: null,
            };
            this.isRenameDialog = false;
        },
        handleRename() {

            updateMusicName({
                name: this.curName.name,
                music_id: this.curName.music_id
            }).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    this.$message.success('重命名成功！')
                    this.childMusicList[this.curName.index].name = this.curName.name
                    this.handleRenameClose()

                } else {
                    this.$message.error('重命名失败！')
                }
            })

        },
        handleType(item, index) {
            this.curItem = item;
            this.curItem.index = index;
            console.log(item.type);
            if (item.type.length > 0 && item.type[0] != 0) {
                this.curType = item.type
            }

            this.isTypeDialog = true;
        },
        handleTypeClose() {
            this.isTypeDialog = false;
            this.curType = []
        },
        handleRating(item) {
            console.log(item);
            rateMusic({
                rate: item.rate,
                music_id: item.music_id
            }).then(res => {
                console.log(res);
                if (res.data.code == 1) {
                    this.$message.success('评分成功！')

                } else {
                    this.$message.error('评分失败！')
                }
            })

        },
        handleUpdateMusicList() {
            this.$emit('update:musicList', this.childMusicList)
        },
        handleItemClick(item, index, music_id) {
            console.log(item);
            this.selectedItem = music_id;
            this.$emit('update', item, index, music_id)
            // if (item.isDirectory) {
            //     this.handleLoadFolder(this.root, item.name)

            // }
            // if (item.type == 'video') {
            //     this.isVideoDialog = true;
            //     this.videoUrl = item.path;
            // } else if (item.type == 'img') {
            //     this.isImgDialog = true;
            //     this.imgUrl = this.GLOBAL.serveurl + item.path;
            // }
            // if (!item.isDirectory && item.type == 'others') {
            //     this.$message.error('暂不支持预览该类型文件！')
            // }
        },
        handlePage(num) {
            console.log(num, '页面跳转');

            // document.getElementById("target").scrollIntoView(true);
            this.$refs.scrollContainer.setScrollPosition('vertical', 0)
            // if (this.isFirstLoad) {
            //     this.isFirstLoad = false;
            // } else {
            this.$emit('reload', num)

        },
        handleListWidth(width) {
            this.$refs.qList.$el.style.width = width
        }

    }

}
</script>

<style scoped>
.name {
    white-space: nowrap;
}

.name.scroll {
    animation: 8s wordsLoop linear infinite;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(calc(100%));
    }

    50% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(calc(-100%));
    }
}
</style>
